<template>
    <div class="learn">
        <p>动画</p>
        <button v-on:click="show = !show, disable = !disable" >点击动画</button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
        <button :disabled='disable'>disable</button>
        <p>{{message}}</p>
        <p>Computed reversed message!!! {{comp_rever_msg}}</p>
    </div>
</template>

<script>
export default {
    name: 'Learn',
    mounted() {
        console.log('<<< Learn >>>');
    },
    data() {
        return {
            show: true,
            disable: false,
            message: 'hello computed'
        }
    },
    methods: {
        
    },
    computed: {
        comp_rever_msg: function(){
            // console.log(this);
            return this.message.split('').reverse().join('')
        }
    },
}
</script>
<style lang="css">
    .fade-enter-active, .fade-leave-active {
        transition: opacity 1s;
    }
    


</style>